<template>
  <!-- 历史邮件 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="eno"
      :tool-button="false"
      :pagination="false"
      :height="list.length > 0 ? '' : 200"
    >
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="EmailListBox">
import { ref, reactive } from "vue";

import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";

import { findEmailAboutRequest } from "@/api/modules/common";

const props = defineProps({
  eno: String,
  requestCode: String
});

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive([
  { prop: "emailMessageId", label: "编号", width: "80" },
  { prop: "subject", label: "邮件主题" },
  { prop: "type", label: "邮件类型", width: "100" },
  { prop: "fromUser", label: "发件人" },
  { prop: "toUser", label: "收件人" },
  { prop: "sendDate", label: "发送时间" },
  { prop: "description", label: "备注" }
]);

const list = ref<any[]>([]);
const loading = ref(true);

findEmailAboutRequest({
  "emailMessageQueryDto.moduleCode": props.requestCode,
  "emailMessageQueryDto.moduleEno": props.eno,
  _search: false,
  nd: new Date().getTime(),
  sidx: "emailMessageId",
  sord: "desc",
  page: 1,
  rows: 20
})
  .then((res: any) => {
    loading.value = false;
    let arr = res.data || [];
    arr.forEach(item => {
      item.type = item.folderName == "OUTBOX" ? "发送" : item.folderName == "Inbox" ? "接收" : "-";
      item.toUser = item.toUser.replace(/^<|>$/g, "");
    });
    list.value = arr;
  })
  .catch(() => {
    loading.value = false;
  });
</script>

<style lang="scss" scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
